// mixins for grid system
// ------------------------
@import 'rtl.scss';

@mixin loop-grid-columns($index, $class) {
  @for $i from 0 through $index {
    $col: $index - $i;
    @if ($col > 0) {
      .#{$prefix}-col#{$class}-#{$col} {
        display: block;
        flex: 0 0 percentage(($col / $grid-columns));
        max-width: percentage(($col / $grid-columns));
      }
      .#{$prefix}-col#{$class}-push-#{$col} {
        left: percentage(($col / $grid-columns));
      }
      .#{$prefix}-col#{$class}-pull-#{$col} {
        right: percentage(($col / $grid-columns));
      }
      .#{$prefix}-col#{$class}-offset-#{$col} {
        margin-left: percentage(($col / $grid-columns));
      }
      .#{$prefix}-col#{$class}-order-#{$col} {
        order: $col;
      }
    }
    @include loop-grid-column0($col, $class);
  }
}

@mixin loop-grid-column0($index, $class) {
  @if $index == 0 {
    .#{$prefix}-col#{$class}-#{$index} {
      display: none;
    }
    .#{$prefix}-col-push-#{$index} {
      left: auto;
    }
    .#{$prefix}-col-pull-#{$index} {
      right: auto;
    }
    .#{$prefix}-col#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$prefix}-col#{$class}-pull-#{$index} {
      right: auto;
    }
    .#{$prefix}-col#{$class}-offset-#{$index} {
      margin-left: 0;
    }
    .#{$prefix}-col#{$class}-order-#{$index} {
      order: 0;
    }
  }
  @if ($rtl) {
    @include loop-grid-column-rtl($index, $class);
  }
}

@mixin make-grid($class: '') {
  @include loop-grid-columns($grid-columns, $class);
}
